<template>
	<view class="leave-examine-card" @click="checkDetail">
		<view class="card-wrap">
			<view class="card-content">
				<view class="header">
					<person-infrom :propName="attendeData.pk_psndoc.name" :propNum="attendeData.pk_psndoc.code" :propDepartment="attendeData.attdept.name"></person-infrom>
				</view>
				<view class="basic-inform">
					<view class="basic-time">
						<!-- <view class="star-time-wrap">
							<view class="time">2021-04-24</view>
							<view class="time-tips">到</view>
							<view class="time">2021-04-24</view>
						</view> -->
						<view class="star-time-wrap">
							<view class="time-title" v-for="(value,key) in leaveNum" :style="{color:getColor(key)}">
								<view>{{key}}:{{key.indexOf('小时')!=-1?value+'小时':value+'天'}}</view>
							</view>
						</view>
					</view>
					<view class="leave-inform">
					</view>
				</view>
			</view>
			<view class="card-btn">
				<view class="chekck-more" >查看详情</view>
				<!-- <view class="btn-wrap">
					<my-button type ='plain' @click='handleExit'>退回</my-button>
					<my-button @click='handleAdopt'>通过</my-button>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
import utils from '../../common/utils/utils.js'
export default {
	name: 'attend-examine-card',
	data() {
		return {
		};
	},
	props:{
		leaveNum:'',
		attendeData:{
			type:Object,
		}
	},
	methods:{
		checkDetail(){
			this.$emit('clickDetail')
		},
		getColor(str){
			if(str.indexOf('出勤')!=-1){
				
			}else{
				return utils.getColorByType(str)
			}
		},
		// handleExit(){
		// 	this.$emit('exit',this.leaveData)
		// },
		// handleAdopt(){
		// 	this.$emit('adopt',this.leaveData)
		// },
	},
	created() {
		// let user = this.attendeData
	}
};
</script>

	
<style lang="scss" scoped>
	.header{
		display: flex;
	}
	.time-tips{
		margin: 0 20rpx;
	}
.leave-examine-card {
	padding: 0 36rpx;
	.card-wrap {
		padding: 32rpx 28rpx 20rpx 28rpx;
		box-shadow: 0px 4px 12px 0px rgba(70, 66, 130, 0.1);
		border-radius: 8px;
		.card-content {
			border-bottom: 1px solid #e5e5e5;
			.basic-inform {
				padding: 16rpx 0 16rpx 0;
				display: flex;
				justify-content: space-between;
				.basic-time {
					font-size: 24rpx;
					.star-time-wrap {
						padding: 8rpx 0;
						width: 400rpx;
						display: flex;
						flex-direction: column;
						// flex-wrap: wrap;
						.time-title {
							margin: 10rpx;
							color: #a7a3a3;
						}
						.time {
							color: #4a4a4a;
						}
					}
				}
				.leave-inform {
					width: 140rpx;
				}
			}
		}
		.card-btn {
			display: flex;
			justify-content:flex-start;
			align-items: center;
			height: 70rpx;
			.chekck-more{
				font-size: 28rpx;
				color: #007aff;
			}
			.btn-wrap{
				display: flex;
				padding-top: 18rpx;
				justify-content: flex-end;
			}
		}
	}
}
</style>
